<template>
  <div>
    <div style="position: relative;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="学生" name="student"><Students :isShow='isShow' :updatedTime='updatedTime' :currentCampus='currentCampus'></Students></el-tab-pane>
        <el-tab-pane label="教职工" name="teachingStaff"><SeachingStaff :isShow='isShow' :updatedTime='updatedTime' :currentCampus='currentCampus'></SeachingStaff></el-tab-pane>
      </el-tabs>
      <div
          class="switch-btn cursor iconfont"
          :class="[isShow ? 'icon-yanjing' : 'icon-biyan']"
          @click="handleClickIsShow"
        ></div>
    </div>
  </div>
</template>

<script>
import Students from './students'
import SeachingStaff from './teachingStaff'
export default {
  components: { Students, SeachingStaff },
  data () {
    return {
      isShow: true,
      activeName: 'student',
      currentCampus: '',
      updatedTime: ''
    }
  },
  created () {
  },
  mounted () {

  },
  methods: {
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    handleClick () {
      !this.isShow && (this.isShow = true)
    }
  }
}
</script>

<style lang='scss' scoped>
.switch-btn {
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 5px;
}
</style>
